<template>
  <div>
    <div class="st1">
      <Header />
    </div>
    <div>
      <h1>我的观影偏好</h1>
    </div>
    <div class="st2">
      <div id="myChart" class="st3"></div>
    </div>
    <div class="st4">
      <div id="myChart2" class="st5"></div>
    </div>
  </div>
</template>
<script setup>
import router from '@/router'
import Header from '../components/Client/GlobalCom/Header'
import axios from 'axios'
import '@/assets/scss/userSta.scss'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const uid = ref()
const likes = ref([])
const statistical1 = () => {
  const myChart = echarts.init(document.getElementById('myChart'))
  axios.get('/api/user/getUserRecord/' + uid.value).then((res) => {
    let m = 0
    const a = []
    const b = []
    for (const item of res.data) {
      likes.value.push(item)
      a.push(item.count)
      b.push(item.type)
      if (m < item.count) m = item.count
    }
    myChart.setOption({
      title: {
        text: '我的观影偏好',
        left: 'center'
      },
      legend: {
        data: ['电影类型']
      },
      radar: {
        indicator: [
          { name: b[0], max: m },
          { name: b[1], max: m },
          { name: b[2], max: m },
          { name: b[3], max: m },
          { name: b[4], max: m }
        ],
        splitLine: {
          lineStyle: {
            color: '#262732'
          }
        },
        splitArea: {
          show: false
        },
        name: {
          textStyle: {
            color: '#838D9E'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#262732'
          }
        }
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          label: {
            show: true,
            formatter: function (params) {
              return params.value
            }
          },
          tooltip: {
            trigger: 'item'
          },
          itemStyle: {
            color: 'rgb(42,178,116)',
            borderColor: 'rgb(42,178,116)'
          },
          areaStyle: {
            color: 'rgb(42,178,116)'
          },
          data: [
            {
              value: a,
              name: '观影量'
            }
          ]
        }
      ]
    })
  })
}
const statistical2 = () => {
  const myChart = echarts.init(document.getElementById('myChart2'))
  axios.get('/api/user/getUserRecord/' + uid.value).then((res) => {
    let m = 0
    const a = []
    const b = []
    for (const item of res.data) {
      likes.value.push(item)
      a.push(item.count)
      b.push(item.type)
      if (m < item.cnt) m = item.cnt
    }
    myChart.setOption({
      title: {
        text: '我的观影类型Top5',
        subtext: '您的爱好',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          return params[0].name + '<br>个数：' + params[0].data
        }
      },
      xAxis: {
        type: 'category',
        data: b,
        axisLabel: {
          interval: 0,
          rotate: 15
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: a,
          type: 'bar',
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = [
                  '#c23531',
                  '#2f4554',
                  '#61a0a8',
                  '#d48265',
                  '#91c7ae',
                  '#749f83',
                  '#ca8622',
                  '#2f4554',
                  '#61a0a8',
                  '#d48265'
                ]
                return colorList[params.dataIndex]
              }
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  })
}
onMounted(() => {
  if (document.documentElement.clientWidth < document.documentElement.clientHeight) {
    router.push('userStaMobile')
  }
  uid.value = JSON.parse(sessionStorage.getItem('uid'))
  statistical1()
  statistical2()
})
</script>
